<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=width-device,initial-scale=1.0,user-scalable=no" />
		<title>修改专业</title>		
		<link rel="stylesheet" href="js/bootstrap/css/bootstrap.css" />
	</head>
	<body>
		<div class="container">			
			<!--<ol class="breadcrumb">
				<li><a href="#">人力资源管理系统</a></li>
				<li><a href="#">部门管理</a></li>				
				<li>修改部门</li>
			</ol>-->
			
			<h2 class="page-header">修改专业</h2>
			
			<form id="form1" class="form-horizontal">				
				<div class="form-group">
					<label for="" class="col-sm-2">专业名称</label>
					<div class="col-sm-8">
						<input v-model="majors.majorsName" type="text" id="majorsName" name="majorsName" placeholder="请输入专业名称" class="form-control"/>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-8">
						<input v-model="majors.majorsId" type="hidden" id="majorsId" name="majorsId" />
						<input type="button" value="修改" class="btn btn-success" id="updateBtn" @click="update()"/>
						<input type="button" value="取消" class="btn btn-warning" onclick="window.parent.layer.closeAll()" />
					</div>					
				</div>
			</form>	
		</div>		
		
		<script type="text/javascript" src="js/vue2.5.js" ></script>
		<script type="text/javascript" src="js/axios.min.js" ></script>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/global.js" ></script>
		<script type="text/javascript" src="js/bootstrap/js/bootstrap.js" ></script>
		<script type="text/javascript" src="js/layer/layer.js" ></script>
		<script type="text/javascript" src="js/param.js" ></script>
		
		<script>
		
			//获得传递过来的部门id
			var majorsId = getParam('majorsId');
			var index = getParam('index');
			
			//表单验证函数
			function checkForm() {
			
				var majorsName = $('#majorsName');
				
				//验证部门名称
				if (majorsName.val() == '' || majorsName.val().length > 20) {
					layer.msg('专业名称不能为空且最多20个字符');
					majorsName.focus();
					return false;
				}
				
				return true;					
			}	
			
			//vue实例
			var vue = new Vue({
				el:'.container',
				data:{
					majors:{
						majorsId:'',
						majorsName:''
					}
				},
				methods:{
					get:function(){
						//ajax请求
						axios.get(baseUrl + '/majors/queryId',{
								params:{
									majorsId:majorsId
								}
							})
							.then(function(response){								
								this.majors = response.data;								
							}.bind(this))
							.catch(function(error){
								layer.msg('专业请求失败');
							});
					},
					update:function(){
						//调用表单验证
						if (!checkForm())
							return;
						
						//ajax请求
						axios.post(baseUrl + '/majors/update',$.param(this.majors))
							.then(function(response){
								layer.msg('修改专业成功');
								
								var majors = window.parent.vue.majorsData[index];
					
								majors.majorsId = majorsId;
								majors.majorsName = $('#majorsName').val();
								
								setTimeout(function(){
									window.parent.layer.closeAll();
								},500);
							})
							.catch(function(error){
								layer.msg('修改专业请求失败');
							});
					}
				},
				mounted:function(){
					this.get();
				}
			});
		</script>		
	</body>
</html>